<template>
  <div class="DynamicSlice">
    <div class="title">
      <div>动态切片</div>
      <div style="cursor:pointer;" @click="closeTab">
        <el-icon>
          <close/>
        </el-icon>
      </div>
    </div>
    <div class="top font-color">
      <div class="top_title">工况:</div>
      <el-select v-model="pageData.form_data.work_condition_value" placeholder="请选择" style="width: 300px;">
        <el-option :label="item.label" :value="item.value" v-for="item in pageData.form_data.work_condition"
                   :key="item.value">
        </el-option>
      </el-select>
      <div class="top_title">结果类型:</div>
      <el-radio-group v-model="pageData.form_data.result_type">
        <el-radio :label="item" v-for="item in pageData.form_data.result_type_arr" :key="item"></el-radio>
        <br>
      </el-radio-group>
      <div class="checkbox">
        <div>
          <el-checkbox v-model="pageData.form_data.pingHua" label="平滑塑性区" size="large"><span class="span">平滑塑性区</span>
          </el-checkbox>
          <el-checkbox v-model="pageData.form_data.show_Wy" label="显示位移矢量" size="large"><span class="span">显示位移矢量</span>
          </el-checkbox>
        </div>
        <div>
          <el-checkbox v-model="pageData.form_data.show_Dz" label="显示等值线" size="large"><span class="span">显示等值线</span>
          </el-checkbox>
          <el-checkbox v-model="pageData.form_data.show_slice" label="仅显示切片" size="large"><span
              class="span">仅显示切片</span></el-checkbox>
        </div>

      </div>

    </div>
    <el-form ref="formRef" :model="pageData.form_data" label-width="72px" class="font-color">
      <el-form-item label="切片位置:">
        <el-input
            type="number"
            v-model.number="pageData.form_data.slice_position"></el-input>
      </el-form-item>
      <el-form-item label="切片数量:">
        <el-input
            type="number"
            :max="pageData.form_data.slice_range[1]"
            :min="pageData.form_data.slice_range[0]"
            v-model.number="pageData.form_data.slice_num"></el-input>
      </el-form-item>
      <el-form-item label="法向向量:">
        <el-radio-group v-model="pageData.form_data.fa_XL" class="fx_group">
          <el-radio label="X">X</el-radio>
          <el-radio label="Y">Y</el-radio>
          <el-radio label="Z">Z</el-radio>
        </el-radio-group>
        <el-checkbox v-model="pageData.form_data.reverse_direction" label="反向" size="large"></el-checkbox>
      </el-form-item>
      <el-form-item>
        <el-slider
            :max="pageData.form_data.slice_range[1]"
            :min="pageData.form_data.slice_range[0]"
            v-model="pageData.form_data.slice_num"></el-slider>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="refresh">刷新</el-button>
        <el-button @click="closeTab">取消</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="toSaveFormData">保存</el-button>
        <el-button>showGroup02</el-button>
      </el-form-item>
      <el-form-item label="名称" class="auto-name" v-if="pageData.to_save">
        <el-input v-model="pageData.form_data.name" placeholder="请输入" :disabled="pageData.auto_name"
                  :input-style="{width:'120px'}"/>
        <el-checkbox v-model="pageData.auto_name" label="自动命名" size="small">自动命名</el-checkbox>
        <el-checkbox v-model="pageData.form_data.slice_pic" label="切片云图" size="large"><span class="span">切片云图</span>
        </el-checkbox>
        <el-checkbox v-model="pageData.form_data.slice_dzx" label="切片等值线" size="large"><span class="span">切片等值线</span>
        </el-checkbox>
        <el-button type="primary" @click="saveFormData">确定</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {ElMessage} from 'element-plus';
import {inject, onMounted, reactive, watchEffect} from "vue";
import {getSliceData, saveSliceData} from "../api";
import {
  Close
} from '@element-plus/icons-vue'

export default {
  name: "DynamicSlice",
  components: {
    Close
  },
  emits: ['receiveSliceFormData', 'closeTab'],
  setup: function (props, context) {
    let pageData = reactive({
          auto_name: false,
          to_save: false,
          form_data: {
            name: '',
            work_condition_value: '',
            work_condition: [],
            result_type_arr: [],
            result_type: '',// 结果类型
            pingHua: false,// 平滑塑性区
            show_Wy: false,// 显示位移矢量
            show_Dz: false,// 显示等值线
            show_slice: false,// 显示切片
            slice_position: 0,// 切片位置
            fa_XL: 'X',// 法向向量
            reverse_direction: false,
            slice_num: 0,
            slice_range: [0, 100],
            slice_pic:false,
            slice_dzx:false
          }
        }),
        catchEvent = inject('catchEvent'),
        getData = async () => {
          let {data: form_data} = await getSliceData();
          pageData.form_data = form_data;
        },
        refresh = () => {
          getData();
          catchEvent('动态切片组件--刷新', 'refresh', []);
        },
        closeTab = () => {
          context.emit('closeTab');
          catchEvent('动态切片组件--取消按钮', 'closeTab', []);
        },
        saveFormData = async () => {
          let {data: res} = await saveSliceData(pageData.form_data);
          ElMessage.success({
            message: res.message,
            center: true,
          });
          pageData.to_save=false;
          catchEvent('动态切片组件--保存按钮', 'saveFormData', pageData.form_data);
        },
        toSaveFormData = () => {
          pageData.to_save = true;
        }
    onMounted(async () => {
      await getData();
    })
    watchEffect(() => {
      let {
        work_condition_value,
        result_type,
        pingHua,
        show_Wy,
        show_Dz,
        show_slice,
        slice_num,
        fa_XL,
        reverse_direction
      } = pageData.form_data;
      context.emit('receiveSliceFormData', {
        work_condition_value,
        result_type,
        pingHua,
        show_Wy,
        show_Dz,
        show_slice,
        slice_num,
        fa_XL,
        reverse_direction
      });
      catchEvent('动态切片组件--数据修改', 'receiveSliceFormData', pageData.form_data);
    })

    return {
      pageData,
      refresh,
      closeTab,
      saveFormData,
      toSaveFormData
    }
  }
}
</script>

<style scoped lang="less">
@background-color: #06ceae;
@popUpColor: rgba(18, 33, 46, 0.8);
@popUpBorderColor: rgb(18, 33, 46);
.DynamicSlice {
  width: 300px;
  background: rgba(18, 33, 46, .7);
  border: 1px solid #12212e;
  padding: 0 20px 20px;
  border-radius: 5px;
  position: relative;

  &:after {
    content: "";
    display: inline-block;
    width: 96%;
    height: 4px;
    border: 4px solid @background-color;
    border-left-color: rgba(18, 33, 46, 0);
    border-right-color: rgba(18, 33, 46, 0);
    border-bottom-color: rgba(18, 33, 46, 0);
    position: absolute;
    left: 0;
    top: -1px;
    z-index: 10;
  }

  .title {
    color: white;
    height: 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid black;
    margin-bottom: 8px;
  }

  .top {
    .top_title {
      font-size: 14px;
      color: white;
      margin: 10px 0;
    }

    .el-radio-group {
      border: 1px solid rgba(36, 48, 57, .6);

      .el-radio {
        margin-right: 18px;
        margin-left: 5px;
        width: 50px;
      }
    }

    .checkbox {
      display: flex;
      justify-content: space-between;
    }
  }

  .fx_group {
    border: 1px solid rgba(36, 48, 57, .6);
    margin-right: 5px;

    .el-radio {
      margin-right: 1px;
      margin-left: 2px;
      width: 50px;
    }
  }

  .auto-name {
    border: 1px solid rgba(36, 48, 57, .6);

    .el-input {
      width: 60%;
    }
  }

  .span {
    color: white;
  }
}


.el-checkbox {
  margin-right: 10px;
}

.font-color {
  --el-text-color-regular: white;
  --el-color-white: balck;
  --el-bg-color: @background-color;
  --el-color-primary: @background-color;
}

.el-button--primary {
  background-color: @background-color;
  color: white;
  border-color: @background-color;
}

.el-button--success {
  border-color: @background-color;
  color: @background-color;
  background-color: transparent;
}
</style>
